<template>
	<view class="ota-remote-upgrade">
		<site-basic-cell :name="siteName"></site-basic-cell>
		<view class="setting-form">
			<up-tabs v-model:current="moduleIndex" class="terminal-types" :list="modules" keyName="module"></up-tabs>
			<view class="version-info">
				<view class="version-info__header">
					<view class="version-info__header-before"></view>
					<text class="version-info__header-title">{{$t('ota.remote.upgrade.title')}}</text>
					<text v-if="currentModule"
						class="version-info__header-after">{{i18Replace($t('ota.remote.upgrade.current.version'), { version: currentModule.version })}}</text>
				</view>
				<template v-if="currentModuleDetail">
					<view class="version-info__title">
						<text
							class="version-info__title-label">{{i18Replace($t('ota.remote.upgrade.laster.version'), { version: currentModuleDetail.version})}}</text>
					</view>
					<view v-if="currentModuleDetail" class="version-info__content">
						<view class="" v-html="currentModuleDetail.detail"></view>
					</view>
					<up-cell isLink :title="$t('ota.remote.upgrade.op.types.title')" @click="showOpTypes = true">
						<template #value>
							<up-input :modelValue="opTypeLabel" readonly class="readonly" border="none"
								inputAlign="right"
								:placeholder="$t('ota.remote.upgrade.op.types.placeholder')"></up-input>
						</template>
						<template #label>
							<text class="cell-tips">{{$t('ota.remote.upgrade.op.types.tips')}}</text>
						</template>
					</up-cell>
					<template v-if="opData.type !== -1">
						<up-cell :title="$t('ota.remote.upgrade.op.cell-1')">
							<template #value>
								<up-switch v-model="opData.isShutdown" activeColor="#64B7F6"
									inactiveColor="#848484"></up-switch>
							</template>
							<template #label>
								<text class="cell-tips">{{$t('ota.remote.upgrade.op.cell-1.tips')}}</text>
							</template>
						</up-cell>
						<up-cell :title="$t('ota.remote.upgrade.op.cell-2')">
							<template #value>
								<up-switch v-model="opData.isNow" activeColor="#64B7F6"
									inactiveColor="#848484"></up-switch>
							</template>
							<template #label>
								<text class="cell-tips">{{$t('ota.remote.upgrade.op.cell-2.tips')}}</text>
							</template>
						</up-cell>
						<up-cell v-if="!opData.isNow" :title="$t('ota.remote.upgrade.op.cell-3')" :border="false">
							<template #value>
								<view class="time-slot">
									<view class="time-value" @tap="openTimePicker('startTime')">
										<up-input :modelValue="timeFormat(opData.startTime)" readonly class="readonly"
											border="none" inputAlign="right"
											:placeholder="$t('ota.remote.upgrade.op.cell-3.placeholder-1')"></up-input>
										<up-icon name="arrow-right" color="rgba(255,255,255,0.65)"></up-icon>
									</view>
									<view class="time-value" @tap="openTimePicker('endTime')">
										<up-input :modelValue="timeFormat(opData.endTime)" readonly class="readonly"
											border="none" inputAlign="right"
											:placeholder="$t('ota.remote.upgrade.op.cell-3.placeholder-2')"></up-input>
										<up-icon name="arrow-right" color="rgba(255,255,255,0.65)"></up-icon>
									</view>
								</view>
							</template>
							<template #label>
								<text class="cell-tips">{{$t('ota.remote.upgrade.op.cell-3.tips')}}</text>
							</template>
						</up-cell>

					</template>
				</template>
			</view>
		</view>
		<up-datetime-picker class="time-picker" v-model="currentTime" closeOnClickOverlay
			:confirm-text="$t('time.confirm')" :cancel-text="$t('time.cancel')"
			:title="$t('ota.remote.upgrade.op.cell-3.picker.title')" :show="showTime" mode="datetime"
			@confirm="handleTimeChange" @close="closeTimePicker" @cancel="closeTimePicker">
		</up-datetime-picker>
		<up-picker :show="showOpTypes" :title="$t('ota.remote.upgrade.op.types.picker.title')" closeOnClickOverlay
			:confirm-text="$t('time.confirm')" :cancel-text="$t('time.cancel')" :columns="opTypes"
			@close="showOpTypes = false" @cancel="showOpTypes = false" @confirm="handleOpTypeChange">
		</up-picker>
		<publish-footer :btnLabel="$t('ota.remote.upgrade.publish.btn')"></publish-footer>
	</view>
</template>

<script setup>
	import {
		computed,
		nextTick,
		reactive,
		ref,
		watch
	} from 'vue';
	import dayjs from 'dayjs';

	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		setOTAUpdateDetail,
		setOTAUpdateModule
	} from '@/apis/components/siteSet';
	import {
		useI18n
	} from "vue-i18n";
	import {
		i18Replace
	} from '../../utils/functions';

	const {
		t
	} = useI18n();

	const siteName = ref(null);
	const siteId = ref(null);


	const opTypes = computed(() => [
		[{
			text: t('ota.remote.upgrade.op.types.type-1'),
			value: -1,
		}, {
			text: t('ota.remote.upgrade.op.types.type-2'),
			value: 1,
		}, {
			text: t('ota.remote.upgrade.op.types.type-3'),
			value: 2
		}]
	])
	onLoad(({
		name,
		id
	}) => {
		siteName.value = name;
		siteId.value = id;
		nextTick(() => {
			uni.startPullDownRefresh()
		})
	})

	const modules = ref([]);
	const moduleIndex = ref(0);
	const currentModule = computed(() => {
		return modules.value[moduleIndex.value];
	});
	const loadModules = async () => {
		const {
			data
		} = await setOTAUpdateModule(siteId.value);
		modules.value = data || [];
	}
	const currentModuleDetail = ref(null);
	const loadModuleDetail = async () => {
		if (!currentModule.value) return;
		const {
			data
		} = await setOTAUpdateDetail({
			module: currentModule.value?.module,
			siteId: siteId.value,
			version: currentModule.value?.version
		})
		currentModuleDetail.value = data;
	}
	watch(() => currentModule.value, () => {
		loadModuleDetail();
	})

	const showOpTypes = ref(false);

	const opData = reactive({
		type: null,
		isShutdown: false,
		isNow: true,
		startTime: null,
		endTime: null
	})

	const opTypeLabel = ref('');
	const handleOpTypeChange = ({
		value
	}) => {
		opData.type = value[0].value;
		opTypeLabel.value = value[0].text;
		showOpTypes.value = false;
	}

	const showTime = ref(false);
	const currentTime = ref(null);
	const showTimeType = ref(null);

	const openTimePicker = name => {
		currentTime.value = opData[name];
		showTimeType.value = name;
		showTime.value = true;
	}

	const closeTimePicker = () => {
		showTimeType.value = null;
		showTime.value = false;
	}

	const timeFormat = (value) => {
		return value ? dayjs(value).format(t('ota.remote.upgrade.op.cell-3.format')) : null;
	}

	const handleTimeChange = ({
		value
	}) => {
		currentTime.value = value;
		if (showTimeType.value) {
			opData[showTimeType.value] = value;
		}
		closeTimePicker();
	}

	onPullDownRefresh(async () => {
		await loadModules()
		uni.stopPullDownRefresh();
	})
</script>

<style lang="scss">
	.ota-remote-upgrade {
		padding: 24rpx 32rpx;

		.readonly {
			pointer-events: none;
		}

		.terminal-types {
			& :deep(.u-tabs__wrapper__nav__item) {
				height: 56rpx !important;
				padding: 14rpx 30rpx;
				box-sizing: border-box;

				&:not(:last-child) {
					margin-right: 30rpx;
				}

				.u-tabs__wrapper__nav__item__text {
					// font-family: Alibaba PuHuiTi 3.0;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 28rpx;
					text-align: center;
					color: #FFFFFF !important;
				}
			}

			& :deep(.u-tabs__wrapper__nav__item-active) {
				border-radius: 28rpx;
				background-color: #64B7F6;
			}

			& :deep(.u-tabs__wrapper__nav__line) {
				display: none;
			}
		}

		.setting-form {
			margin-top: 24rpx;
		}

		.version-info {
			margin-top: 20rpx;
			border-radius: 16rpx;
			background-color: #132034;
			padding: 40rpx 32rpx;

			// font-family: Alibaba PuHuiTi 3.0;
			font-size: 32rpx;
			font-weight: normal;
			letter-spacing: 0.0145em;
			color: #EEEEEE;

			&__header {
				@include flex(row);
				position: relative;
				justify-content: space-between;

				&-before {
					position: absolute;
					left: -32rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 32rpx;
					border-radius: 0px 8rpx 8rpx 0px;
					background-color: #64B7F6;
				}

				&-title {}

				&-after {}
			}

			&__title {
				margin-top: 40rpx;
			}

			&__content {
				margin-top: 20rpx;
				padding: 24rpx;
				border-radius: 8rpx;
				background-color: #222D49;
				font-size: 24rpx;
				line-height: 1.6;
				color: #BFBFBF;

				view {
					white-space: pre-line;
				}
			}

			.cell-tips {
				margin-top: 11rpx;
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 24rpx;
				line-height: 32rpx;
				letter-spacing: 0.0145em;
				color: #FC7C00;
				white-space: nowrap;
			}

			.time-slot {
				@include flex(column);

				.time-value {
					@include flex(row);

					&:not(:last-child) {
						margin-bottom: 32rpx;
					}

					& :deep(.u-icon) {
						margin-left: 16rpx;

						.u-icon__icon {
							font-size: 21rpx !important;
						}
					}
				}
			}
		}

		.toolbar-right-close {
			margin-right: 24rpx;

			& :deep(.u-icon__icon) {
				font-size: 26rpx;
				color: #fff !important;
			}
		}
	}

	.time-picker {
		& :deep(.uni-picker-view-wrapper) {

			.u-picker__view__column:first-child,
			.u-picker__view__column:last-child {
				display: none;
			}
		}
	}
</style>